<template>
  <div>
    <div
      class="wrap_nav"
      v-for="(groupitem, groupindex) in groupMenus"
      :key="groupindex"
      v-show="groupitem && groupitem.group.length > 0"
    >
      <p class="nav-p">{{ groupitem.title }}</p>
      <sideBar-item
        v-for="(nav, navsIndex) in groupitem.group"
        :key="navsIndex"
        :navObj="nav"
      ></sideBar-item>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { PermissionModule } from '@/store/modules/permission'
import sideBarItem from './sideBarItem.vue'
@Component({
  name: 'GroupBar',
  components: { sideBarItem }
})
export default class GroupBar extends Vue {
  @Prop({ default: { app: { title: '' } } }) private groupSettings: any
  get menus () {
    return PermissionModule.routes
  }

  get groupMenus () {
    const groupMenus: any = []
    Object.keys(this.groupSettings as object).some((key, index) => {
      const groupItem: any = {
        title: '',
        group: []
      }
      const group: any = []
      this.menus.forEach((menusitem: any) => {
        if (menusitem.name === 'webchat') {
          const webchatTodoList = (this as any).$store.state.webchat.webchatList.webchat_todo || [] // 当前待处理下的会话列表
          const leaveTodoList = (this as any).$store.state.webchat.webchatList.leave_todo || [] // 当前待处理下的会话列表
          if (webchatTodoList.length > 0 || leaveTodoList.length > 0) {
            menusitem.hot = true
          } else {
            menusitem.hot = false
          }
        }
        if (menusitem.meta && menusitem.meta.group && menusitem.meta.group === key) {
          group.push(menusitem)
        }
      })
      groupItem.title = this.groupSettings[key].title
      groupItem.group = group
      groupMenus.push(groupItem)
    })
    return groupMenus
  }
}
</script>
<style lang="stylus" scoped>
.nav
  position absolute
  left 0
  top 0
  width 68px
  height 100%
  background $bgc-gray
  z-index 99
  font-size 14px
.nav-p
  color $fc-gray4
  font-size 12px
  transform scale(0.8)
  margin 20px 0 6px 0
  &:before, &:after
    content ''
    border-top 1px solid #E8ECF8
    display inline-block
    width 20px
&:after
  width 62px !important
.V7_iconfont
  font-size 14px
  color $icon-gray
  padding-right 6px
.agent-wrap
  height 56px
  width 76px
  position absolute
  cursor pointer
  z-index 10
  background $bgc-gray
.agent-img
  width 32px
  height 32px
  margin 8px 12px 10px 12px
  display inline-block
  line-height 32px
  position relative
  img
    width 100%
    height 100%
    border-radius 50%
    display inline-block
    position absolute
    top 3px
    left 3px
  .img-span
    width 34px
    height 34px
    border-radius 50%
    display inline-block
.type-danger
  border 2px solid $c-danger
.type-normal
  border 2px solid $c-main
.type-green
  border 2px solid $c-green
.type-orange
  border 2px solid $c-warn
.agent-name
  padding-top 22px
  display inline-block
  max-width 4em
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
  font-weight bold
  color $fc-gray
.nav-footer
  background $bgc-gray
  z-index 100
  position relative
.nav.navMenuState
  width 130px
  .logoIcon
    background url('../../assets/img/logo.png') no-repeat 20px 6px
    background-size 20px
.logoIcon
  width 100%
  height 58px
  line-height 38px
  text-align center
  color $fc-gray
  font-weight 500
  font-size 12px
  background url('../../assets/img/logo.png') no-repeat 20px 6px
  background-size 20px
  .circle
    margin 4px 3px
    display inline-block
    width 3px
    height 3px
    background $fc-gray
    border-radius 5px
  .logo-box
    width 70px
    text-align left
    margin-left 50px
    .logo-title
      padding-top 2px
  .version
    color $fc-gray4
    /* transform scale(.8) */
.nav-items
  width 100%
  margin-top 30px
  height calc(100vh - 68px)
  .wrap_nav
    position relative
  &:first-child
    margin-top 16px
.nav.navMenuState
  .agent-wrap
    width 128px
  .nav-items
    height calc(100vh - 68px)
::-webkit-scrollbar-track-piece
  background-color transparent
  -webkit-border-radius 0
::-webkit-scrollbar-thumb
  background-color transparent
  border 0
  border-radius 0
::-webkit-scrollbar
  width 0
  height 0
</style>
